<style>
    .classlist {
        display: flex;
        width: 100%;
        height: 42.67px;
        font-size: 16px;
    }
    .classlist > li {
        height: 100%;
        line-height: 43px;
        padding: 0px 11px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .classlist > li:nth-child(2) {
        color: #f00581;
        font-weight: bold;
        padding-left: 15px;
    }
    .classlist > li:hover {
        color: #f00581;
        cursor: pointer;
    }
    .classlist .class-btn {
        position: relative;
        width: 156px;
        background: #f00581;
        color: white;
    }
    .classlist .class-btn .detail {
        display: block;
        position: absolute;
        top: 42px;
        left: 0;
        width: 156px;
        height: 0px;
        font-size: 12px;
        overflow: hidden;
        transition: height 0.5s;
        z-index: 10;
    }
    .classlist .class-btn .detail > li {
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background: #f00581;
    }
    .classlist .class-btn .detail > li:hover {
        color: #f00581;
        background: #fff;
    }
    .classlist .class-btn .detail > li:last-child:hover {
        color: white;
        background: #f00581;
    }
    .classlist .class-btn:hover > .detail {
        display: block;
        height: 495px;
        transition: height 0.5s;
    }
</style>
<nav class="bancen">
    <ul class="classlist">
        <li>
            <div class="class-btn">
                商品分类
                <ul class="detail">
                    <li data-id="underwear">女装/男装/内衣</li>
                    <li data-id="shoes">女鞋/男鞋/箱包</li>
                    <li data-id="nail">护肤彩妆/个护</li>
                    <li data-id="football">运动户外</li>
                    <li data-id="computer">家电数码</li>
                    <li data-id="children">母婴童装</li>
                    <li data-id="diamonds">手表配饰</li>
                    <li data-id="bed.json">居家用品</li>
                    <li data-id="lingshi">唯品生活</li>
                    <li data-id="durex">医药健康</li>
                    <li data-id="">&nbsp;</li>
                </ul>
            </div>
        </li>
        <li><a href="#classify-card" style="color: #fa2a83">推荐</a></li>
        <li class="tab" data-id="qiang">大牌疯抢</li>
        <li class="tab" data-id="qiang">唯品快抢</li>
        <li class="tab" data-id="aolai">唯品奥莱</li>
        <li class="tab" data-id="clear">品牌清仓</li>
        <li class="tab" data-id="vip_5">女装</li>
        <li class="tab" data-id="shoes">鞋包</li>
        <li class="tab" data-id="football">运动</li>
        <li class="tab" data-id="nail">美妆</li>
        <li class="tab" data-id="computer">电器</li>
        <li class="tab" data-id="children">母婴</li>
        <li>更多</li>
    </ul>
</nav>
<script>
    $('.class-btn').on("click",".detail li",function (){
        let id=$(this).attr("data-id")
        if (id===""){
            return;
        }
        window.open("./shoplist.html#id="+id)
    })
    $('.classlist').on("click",".tab",function (){
        let id=$(this).attr("data-id")
        if (id===""){
            return;
        }
        window.open("./shoplist.html#id="+id)
    })
</script>